import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {observer, inject} from 'mobx-react'
import {PullToRefresh, ListView, Modal, Card, WingBlank, WhiteSpace, SegmentedControl} from 'antd-mobile';

const alert = Modal.alert;


/**
 * 物业报修处理页面
 * */
@inject('repairListStor', 'repairInfoStore')
@observer
class RepairList extends Component {
    constructor(props) {
        super(props);
        this.height = document.documentElement.clientHeight;
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        });
    }

    componentDidMount() {
        this.height = this.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        initToken(() => {
            console.log("success");
        }, () => {
            console.log("failed");
        });
        this.props.repairListStor.onRefresh();
    }

    render() {
        const {refreshing, isLoading, onRefresh, onEndReached, repairData, hasMore, deleteRepair, onChangeSC, segmentedControlIndex} = this.props.repairListStor;
        const row = (rowData, sectionID, rowID) => {
            return (
                <WingBlank size="lg" key={rowID}>
                    <WhiteSpace size="lg"/>
                    <Card>
                        <Card.Header
                            title={rowData.type}
                            thumb="/pages/mobile/property/repair/repair.png"
                            extra={<span style={{fontSize: 15}}>{rowData.commit_time}</span>}
                        />
                        <Card.Body>
                            <div>{rowData.content}</div>
                        </Card.Body>
                        <Card.Footer content={<div style={{color: '#72ACE3'}}
                                                   onClick={() => {
                                                       this.props.history.push('/pages/mobile/property/repair/RepairInfo');
                                                       this.props.repairInfoStore.setRepairInfo(rowData);
                                                   }}>
                            详细信息</div>}
                                     extra={rowData.is_delete === 1 ? <div style={{color: '#EE6A50'}}
                                                                           onClick={() => alert('删除提示', '确定要删除这个报修信息吗？', [
                                                                               {
                                                                                   text: '取消',
                                                                                   onPress: () => console.log('cancel')
                                                                               },
                                                                               {
                                                                                   text: '确定',
                                                                                   onPress: () => deleteRepair(rowData.id)
                                                                               },
                                                                           ])}>删除</div> : ''}/>
                    </Card>
                    <WhiteSpace size="lg"/>
                </WingBlank>
            );
        };
        return (<div style={{
                MozUserSelect: 'none',
                OUserSelect: 'none',
                KhtmlUserSelect: 'none',
                WebkitUserSelect: 'none',
                msUserSelect: 'none',
                userSelect: 'none'
            }}>
                <WingBlank size="lg">
                    <div style={{paddingTop: 5}}>
                        <SegmentedControl onChange={onChangeSC} selectedIndex={segmentedControlIndex}
                                          values={['未处理', '已受理', '已完成']}/>
                    </div>
                </WingBlank>
                <ListView
                    ref={el => this.lv = el}
                    dataSource={this.dataSource.cloneWithRows(repairData.slice())}
                    renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
                        {hasMore ? '没有更多数据' : isLoading ? '正在加载...' : '加载完成'}
                    </div>)}
                    renderRow={row}
                    style={{
                        height: this.height,
                        border: '1px solid #ddd',
                        margin: '5px 0',
                    }}
                    pullToRefresh={<PullToRefresh
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />}
                    onEndReached={onEndReached}
                    pageSize={10}
                />
            </div>
        );
    }
}

export default RepairList;